<template>
    <li>

        <input type="checkbox" class="check" :checked="good.isCheck" @change="$emit('changeCheckStatus', good.id)" />
        <span>{{ good.goodName }}</span>
        <div class="step">
            <!-- vue框架中：属性名=true，属性值是布尔值来决定是否显示此属性 -->
            <button class="dec" :disabled="good.number === 1" @click="$emit('changeNum', good.id, 'dec')">-</button>
            <input type="text" :value="good.number" class="num" />
            <button class="inc" @click="$emit('changeNum', good.id, 'inc')">+</button>
        </div>
        <span class="single-price">¥{{ good.price }}</span>
        <span class="total-price">¥{{ good.number * good.price }}</span>
        <span class="del" @click="$emit('deleteGood', good.id)">删除</span>
    </li>
</template>

<script setup>

defineProps(['good'])

</script>

<style>
li {
    display: flex;
    list-style-type: none;
    padding: 6px;
}

li div,
li span,
li input {
    padding: 2px 8px;
}

li .step input {
    width: 40px;
    outline: 0;
}

li .step button {
    width: 30px;
}
</style>